<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  <title>收银台</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">


  <!--<style>-->
  <!--.trade-info {-->

  <!--}-->
  <!--</style>-->
</head>
<body>
<div id="app">
  <!--<van-nav-bar title="收银台" fixed/>-->
  <!--<van-cell-group class="trade-info">-->
    <VanCell title="订单名称" value="tradeInfo.title"/>
    <van-cell title="订单编号" :value="tradeInfo.tradeNo"/>
    <van-cell title="订单金额" :value="tradeInfo.pendingAmount"></van-cell>
    <van-cell title="创建时间" :value="tradeInfo.createTime"/>

  <!--</van-cell-group>-->
</div>

</body>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
<script>
  // 在 #app 标签下渲染一个按钮组件
  var app = new Vue({
    el: '#app',
    data: {
      tradeInfo: {
        title: '小蜜手机',
        tradeNo: '1230749539612102658',
        createTime: '2020-02-01 12:45',
        pendingAmount: '2999.99'
      }
    },
    methods: {},
    created() {
      vant.Toast("hahahaha")
    }
  });

  // // 调用函数组件，弹出一个 Toast
  // vant.Toast('提示');
</script>
</html>
